import React from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import './index.css'
import Index from '../Index'
import HouseList from '../HouseList'
import News from '../News'
import Profile from '../Profile'

const TABITEMS = [
	{
		title: '首页',
		icon: 'icon-ind',
		path: '/home',
	},
	{
		title: '找房',
		icon: 'icon-findHouse',
		path: '/home/list',
	},
	{
		title: '资讯',
		icon: 'icon-infom',
		path: '/home/news',
	},
	{
		title: '我的',
		icon: 'icon-my',
		path: '/home/profile',
	},
]

export default class Home extends React.Component {
	//简化语法
	state = {
		selectedTab: this.props.location.pathname,
	}

	componentDidUpdate(preProps){//这里的状态更新一定要进行判断，因为状态更新会导致组件更新，组件更新又会触发componentDidUpdate
		if(preProps.location.pathname !== this.props.location.pathname){
			this.setState({
				selectedTab: this.props.location.pathname,
			})
		}
	}

	renderTabBarItem() {
		return TABITEMS.map(item =>
			<TabBar.Item
				title={item.title}
				key={item.title}
				icon={<i className={`iconfont ${item.icon}`} />}
				selectedIcon={<i className={`iconfont ${item.icon}`} />}
				selected={this.state.selectedTab === item.path}
				onPress={() => {
					this.setState({
						selectedTab: item.path,
					});
					this.props.history.push(item.path)
				}}
			/>)
	}

	render() {
		return (
			<div className='home'>
				{/* 子路由 */}
				<Route exact path='/home' component={Index}></Route>
				<Route path='/home/list' component={HouseList}></Route>
				<Route path='/home/news' component={News}></Route>
				<Route path='/home/profile' component={Profile}></Route>

				{/* Tabbar */}
				<TabBar
					unselectedTintColor="#888"
					tintColor="green"
					noRenderContent
					barTintColor="white"
				>
					{this.renderTabBarItem()}
				</TabBar>
			</div>
		)
	}
}